<template>
  <div id="app">
    <div class="tit">
      <span class="iconfont icon-fanhui" @click="back"></span>
      <p class="h1">设置</p>
    </div>
    <div class="set">
      <p class="p1">设置</p>
      <a href="./address.html"><p class="p2"><span>收货地址</span><span class="iconfont icon-you"></span></p></a>
    </div>
    <div class="safe">
      <p class="p1">安全中心</p>
      <a href="./revise.html"><p class="p2"><span>登录密码</span><span class="iconfont icon-you"></span></p></a>
    </div>
    <button class="exit" @click="show">退出当前账号</button>

  </div>
</template>
<script>
    export default {
        name:'App',
        components:{

        },
        data(){
            return{

            }
        },
        methods:{
            back(){
                this.$router.go(-1)
            },
            show(){
                this.$messagebox({
                    title: '提示',
                    message: '确定退出',
                    showCancelButton: true,
                    confirmButtonText:"确定",
                    cancelButtonText:"取消"
                }).then(action => {
                    if(action == 'confirm'){
                        console.log('确定')
                    }else{
                        console.log('取消')
                    }
                })
            }
        }
    }
</script>
<style lang="less">
  @baseFontSize:20px;
  @baseSize:20;
  html{
    font-size: @baseFontSize;
  }
  .px2rem(@name,@px){
      @{name}:@px / 2 / @baseSize * 1rem;
  }

  *{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
  }
#app {
  background: #f5f5f5;
  .tit{
    position: relative;
    background: orange;

    span{
      position: absolute;
      left: 15px;
      top: 10px;
    }
    .h1{
      text-align: center;
      .px2rem(line-height,80);
      .px2rem(height,80);
      border-bottom: 1px solid gray;
      color: white;
    }
  }
  .set{
    a{
      color: black;
    }
  }
  .safe{
    a{
      color: black;
    }
  }
  .p1{
    .px2rem(line-height,90);
    .px2rem(padding-left,20);
    .px2rem(font-size,30);
  }
  .p2{
    background: white;
    .px2rem(padding-left,20);
    display: flex;
    .px2rem(line-height,90);
    .px2rem(font-size,25);
    .px2rem(padding-right,30);
    span{
      flex: 1;
      &:last-child{
        text-align: right;
      }
    }
     }
  .exit{
    position: absolute;
    left: 0;
    bottom: 0;
    .px2rem(width,750);
    .px2rem(height,80);
    background: orangered;
    color: white;
    outline: none;
    border: none;
  }
}


</style>
